<div class="tab-calibration toolbar_fixed_bottom">
    <div class="content_wrapper">
        <!-- should be the first DIV on each tab -->
        <div class="cf_column full spacerbottom">
            <div class="tab_title" data-i18n="tabCalibration">Calibration</div>
            <div class="cf_column threefourth_left">
                <div class="spacer_right">
                    <div class="gui_box grey">
                        <div class="gui_box_titlebar">
                            <div class="spacer_box_title" data-i18n="calibrationHead1"></div>
                        </div>
                        <div class="spacer_box">
                            <div class="calibHeader">
                                <div class="twothird">
                                    <div class="note" data-i18n="NoteCalibration"></div>
                                </div>
                                <div class="third_right">
                                    <div class="default_btn">
                                        <div id="calib_btn">
                                            <a id="calibrate-start-button" class="calibrate" href="#" data-i18n="AccBtn"></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div data-step="1" class="tile step1 finished">
                                <div class="steptitle">Step 1</div>
                                <div class="indicator"></div>
                            </div>
                            <div data-step="2" class="tile step2 active">
                                <div class="steptitle">Step 2</div>
                                <div class="indicator"></div>
                            </div>
                            <div data-step="3" class="tile step3">
                                <div class="steptitle">Step 3</div>
                                <div class="indicator"></div>
                            </div>
                            <div data-step="4" class="tile step4">
                                <div class="steptitle">Step 4</div>
                                <div class="indicator"></div>
                            </div>
                            <div data-step="5" class="tile step5">
                                <div class="steptitle">Step 5</div>
                                <div class="indicator"></div>
                            </div>
                            <div data-step="6" class="tile step6">
                                <div class="steptitle">Step 6</div>
                                <div class="indicator"></div>
                            </div>
                            <div class="gui_box grey" id="accPosAll">
                                <div class="gui_box_titlebar">
                                    <div class="spacer_box_title" data-i18n="calibrationHead2"></div>
                                </div>
                                <div class="spacer_box">
                                    <table class="cf_table acc">
                                        <tr>
                                            <td data-i18n="accZero"></td>
                                            <td><label for="accZeroX"><span>X</span></label><input readonly disabled type="number" name="accZeroX" min="-32768" max="32767"></td>
                                            <td><label for="accZeroY"><span>Y</span></label><input readonly disabled type="number" name="accZeroY" min="-32768" max="32767"></td>
                                            <td><label for="accZeroZ"><span>Z</span></label><input readonly disabled type="number" name="accZeroZ" min="-32768" max="32767"></td>
                                        </tr>
                                        <tr>
                                            <td data-i18n="accGain"></td>
                                            <td><label for="accGainX"><span>X</span></label><input readonly disabled type="number" name="accGainX" min="1" max="8192"></td>
                                            <td><label for="accGainY"><span>Y</span></label><input readonly disabled type="number" name="accGainY" min="1" max="8192"></td>
                                            <td><label for="accGainZ"><span>Z</span></label><input readonly disabled type="number" name="accGainZ" min="1" max="8192"></td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="cf_column fourth">
                <!-- div class="gui_box grey">
                    <div class="gui_box_titlebar">
                        <div class="spacer_box_title" data-i18n="calibrationHead3"></div>
                    </div>
                    <div class="spacer_box">
                        <span data-i18n="LevCalText">text</span>
                        <div class="default_btn">
                            <div id="level_btn">
                                <a class="level" href="#" data-i18n="LevBtn"></a>
                            </div>
                        </div>
                    </div>
                </div -->
                <div class="gui_box grey">
                    <div class="gui_box_titlebar">
                        <div class="spacer_box_title" data-i18n="calibrationHead4"></div>
                    </div>
                    <div class="spacer_box">
                        <span data-i18n="MagCalText">text</span>
                        <div class="default_btn">
                            <div id="mag_btn">
                                <a class="calibratemag" href="#" data-i18n="MagBtn"></a>
                            </div>
                        </div>
                        <table id="mag-calibrated-data" class="cf_table">
                            <tr>
                                <td><label for="MagX"><span>Zero X</span></label></td>
                                <td><input readonly disabled type="number" name="MagX" min="-32768" max="32767"></td>
                            </tr>
                            <tr>
                                <td><label for="MagY"><span>Zero Y</span></label></td>
                                <td><input readonly disabled type="number" name="MagY" min="-32768" max="32767"></td>
                            </tr>
                            <tr>
                                <td><label for="MagZ"><span>Zero Z</span></label></td>
                                <td><input readonly disabled type="number" name="MagZ" min="-32768" max="32767"></td>
                            </tr>
                            <tr>
                                <td><label for="MagGainX"><span>Gain X</span></label></td>
                                <td><input readonly disabled type="number" name="MagGainX" min="-32768" max="32767"></td>
                            </tr>
                            <tr>
                                <td><label for="MagGainY"><span>Gain Y</span></label></td>
                                <td><input readonly disabled type="number" name="MagGainY" min="-32768" max="32767"></td>
                            </tr>
                            <tr>
                                <td><label for="MagGainZ"><span>Gain Z</span></label></td>
                                <td><input readonly disabled type="number" name="MagGainZ" min="-32768" max="32767"></td>
                            </tr>
                        </table>
                    </div>
                </div>
                <div class="gui_box grey">
                    <div class="gui_box_titlebar">
                        <div class="spacer_box_title" data-i18n="calibrationHead5"></div>
                    </div>
                    <div class="spacer_box">
                        <span data-i18n="OpflowCalText">text</span>
                        <div class="default_btn">
                            <div id="opflow_btn">
                                <a class="calibrateopflow" href="#" data-i18n="OpflowCalBtn"></a>
                            </div>
                        </div>
                        <table id="opflow-calibrated-data" class="cf_table">
                            <tr>
                                <td><label for="OpflowScale"><span>Scale</span></label></td>
                                <td><input type="number" name="OpflowScale" min="0" max="10000"></td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="content_toolbar">
        <div class="btn save_btn">
            <a id="calibrateButtonSave" class="save" href="#" data-i18n="configurationButtonSave"></a>
        </div>
    </div>
</div>
<div id="modal-acc-calibration-start" class="is-hidden">
    <div class="modal__content">
        <h1 class="modal__title" data-i18n="accCalibrationStartTitle"></h1>
        <div class="modal__text" data-i18n="accCalibrationStartBody"></div>
    </div>
    <div class="modal__buttons">
        <a id="modal-start-button" class="modal__button modal__button--main" data-i18n="OK"></a>
    </div>
</div>
<div id="modal-acc-calibration-stop" class="is-hidden">
    <div class="modal__content">
        <h1 class="modal__title" data-i18n="accCalibrationStopTitle"></h1>
        <div class="modal__text" data-i18n="accCalibrationStopBody"></div>
    </div>
    <div class="modal__buttons">
        <a id="modal-stop-button" class="modal__button modal__button--main" data-i18n="OK"></a>
    </div>
</div>

<div id="modal-acc-processing" class="is-hidden">
    <div class="modal__content">
        <h1 class="modal__title modal__title--center" data-i18n="accCalibrationProcessing"></h1>
    </div>
</div>

<div id="modal-compass-processing" class="is-hidden">
    <div class="modal__content">
        <h1 class="modal__title modal__title--center" data-i18n="accCalibrationProcessing"></h1>
        <div class="modal-compass-countdown modal__text"></div>
    </div>
</div>

<div id="modal-opflow-processing" class="is-hidden">
    <div class="modal__content">
        <h1 class="modal__title modal__title--center" data-i18n="accCalibrationProcessing"></h1>
        <div id="modal-opflow-countdown" class="modal__text"></div>
    </div>
</div>
